<template>
  <!-- 赞赏 -->
  <div
    class="shadow__box--mini wow admire__wrap"
    v-if="admires && admires.length"
    :style="{ backgroundImage: `url(${webInfo.admireBg})` }"
  >
    <div class="admire-title">🧨赞赏名单</div>
    <vue-seamless-scroll
      :data="admires"
      style="height: 200px; overflow: hidden"
    >
      <div v-for="(item, i) in admires" class="flex flex--b" :key="i">
        <div class="flex">
          <img
            class="admire__avatar-img"
            src="https://img0.baidu.com/it/u=1752903520,1572100722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1694019600&t=01d5595b10834ffe5a3ff0ee4bcf4b47"
          />
          <div class="admire__username">
            {{ item.username }}
          </div>
        </div>
        <div class="admire__money">{{ item.admire }}元</div>
      </div>
    </vue-seamless-scroll>
    <div class="admire__btn">赞赏</div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import vueSeamlessScroll from "vue-seamless-scroll/src";
import { useWebInfoStore } from "@/store/webInfo.store";
import { storeToRefs } from "pinia";
const { webInfo } = storeToRefs(useWebInfoStore());
const admires = ref([
  {
    id: null,
    username: "Sara",
    password: null,
    phoneNumber: null,
    email: null,
    userStatus: null,
    gender: null,
    openId: null,
    avatar: "https://file.poetize.cn/userAvatar/Sara116383649934075",
    admire: "1000",
    subscribe: null,
    introduction: null,
    userType: null,
    createTime: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
  },
  {
    id: null,
    username: "Chris",
    password: null,
    phoneNumber: null,
    email: null,
    userStatus: null,
    gender: null,
    openId: null,
    avatar: "https://file.poetize.cn/randomAvatar/Sara116383641712031",
    admire: "40",
    subscribe: null,
    introduction: null,
    userType: null,
    createTime: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
  },
  {
    id: null,
    username: "Cyberfish",
    password: null,
    phoneNumber: null,
    email: null,
    userStatus: null,
    gender: null,
    openId: null,
    avatar: "https://file.poetize.cn/randomAvatar/Sara116383640738099",
    admire: "88.88",
    subscribe: null,
    introduction: null,
    userType: null,
    createTime: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
  },
  {
    id: null,
    username: "Leslie",
    password: null,
    phoneNumber: null,
    email: null,
    userStatus: null,
    gender: null,
    openId: null,
    avatar: "https://file.poetize.cn/randomAvatar/Sara116383640738096",
    admire: "18.88",
    subscribe: null,
    introduction: null,
    userType: null,
    createTime: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
  },
  {
    id: null,
    username: "Evan",
    password: null,
    phoneNumber: null,
    email: null,
    userStatus: null,
    gender: null,
    openId: null,
    avatar: "https://file.poetize.cn/randomAvatar/Sara116383640738096",
    admire: "20",
    subscribe: null,
    introduction: null,
    userType: null,
    createTime: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
  },
  {
    id: null,
    username: "wyh382232907",
    password: null,
    phoneNumber: null,
    email: null,
    userStatus: null,
    gender: null,
    openId: null,
    avatar: "https://file.poetize.cn/userAvatar/wyh100670168362755186683.jpg",
    admire: "10",
    subscribe: null,
    introduction: null,
    userType: null,
    createTime: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
  },
  {
    id: null,
    username: "张三",
    password: null,
    phoneNumber: null,
    email: null,
    userStatus: null,
    gender: null,
    openId: null,
    avatar: "https://file.poetize.cn/randomAvatar/Sara116383641712039",
    admire: "9.99",
    subscribe: null,
    introduction: null,
    userType: null,
    createTime: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
  },
  {
    id: null,
    username: "pengjunlee",
    password: null,
    phoneNumber: null,
    email: null,
    userStatus: null,
    gender: null,
    openId: null,
    avatar: "https://file.poetize.cn/randomAvatar/Sara116383640738099",
    admire: "66.66",
    subscribe: null,
    introduction: null,
    userType: null,
    createTime: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
  },
  {
    id: null,
    username: "xyan9i",
    password: null,
    phoneNumber: null,
    email: null,
    userStatus: null,
    gender: null,
    openId: null,
    avatar: "https://file.poetize.cn/randomAvatar/Sara116383642997556",
    admire: "30",
    subscribe: null,
    introduction: null,
    userType: null,
    createTime: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
  },
  {
    id: null,
    username: "yyds",
    password: null,
    phoneNumber: null,
    email: null,
    userStatus: null,
    gender: null,
    openId: null,
    avatar: "https://file.poetize.cn/randomAvatar/Sara116383641712031",
    admire: "12",
    subscribe: null,
    introduction: null,
    userType: null,
    createTime: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
  },
  {
    id: null,
    username: "ws- relax",
    password: null,
    phoneNumber: null,
    email: null,
    userStatus: null,
    gender: null,
    openId: null,
    avatar: "https://file.poetize.cn/randomAvatar/Sara116383640738092",
    admire: "50",
    subscribe: null,
    introduction: null,
    userType: null,
    createTime: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
  },
]);
</script>
<style lang="scss" scoped>
.admire {
  &__wrap {
    padding: 25px;
    border-radius: 10px;
    animation: hideToShow 1s ease-in-out;
    margin-top: 40px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  &__title {
    font-weight: bold;
    margin-bottom: 20px;
  }
  &__avatar-img {
    margin-bottom: 10px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
  }
  &__username {
    margin-left: 10px;
    height: 36px;
    line-height: 36px;
    overflow: hidden;
    max-width: 80px;
  }
  &__money {
    height: 36px;
    line-height: 36px;
  }
  &__btn {
    padding: 13px 15px;
    background: #ff416c;
    border-radius: 3rem;
    color: #fff;
    width: 100px;
    user-select: none;
    cursor: pointer;
    text-align: center;
    margin: 20px auto 0;
    transition: all 1s;
    &:hover {
      transform: scale(1.2);
    }
  }
}
</style>
